.app-header {
  position: relative;
  z-index: 1;
  header{
    .headerTop{
      background: #363636 url(./../images/header/headerBG.jpg) no-repeat fixed top;

      height: 80px;
      .logo {
        float: left;
        font-size: xx-large;
        font-family: 方正正中黑简体;
        color: #66C036;
        margin-top: 20px;
        position: relative;
        left: 50%;
        margin-left: -460px;
      }
      .headerGuide{
        float: right;
        position: relative;
        right: 50%;
        margin-right: -460px;
        p{
          color: white;
          float: right;
          font-family: "微软雅黑";
          margin: 50px 0 0 20px;
          a{
            color: #ffffff;
            text-decoration: none;
            padding: 10px;
            &:hover,
            &focus{
              background: #cccccc;
              cursor: pointer;
              border-radius: 5px;
            }
          }
        }
      }
    }
    .headerDown{
      width: 100%;
      height: 56px;
      background-image: url(./../images/header/headDownBG.jpg);
      font-family: "微软雅黑";
      .headerLeft{
        float: left;
        margin-left: -460px;
        position: relative;
        left: 50%;
        .menuName{
          float: left;
          height: 56px;
          position: relative;
          background-image: url(./../images/header/menuBG.png);
          cursor: pointer;
          &:hover{
            .menuDiv{
              visibility: visible;
            }
          }

          .cata{
            border: 2px;
            border-color: #F7F7F6;
            border-style: none solid;
            padding: 14px 0;
            margin: 0;
            width: 200px;
            text-align: center;
          }
          .menuDiv{
            width: 203px;
            height: 337px;
            position: absolute;
            z-index: 20 !important;
            background-color: #C0C0C0;
            top: 56px;
            font-size: small;
            color: #54524F;
            visibility: hidden;
            a{
              text-decoration: none;
            }
            .even{
              background: #ECEAE8;
            }
            .odd{
              background: #F6F6F5;
            }
            .cataDiv{
              width: 203px;
              height: 42px;
              &:hover{
                background: #90dd58;
              }

              img{
                margin-left: 20px;
                margin-top: 5px;
                float: left;
              }
              p{
                margin: 0;
                padding-top: 11px;
                color: #54524F;
              }
            }
          }

        }
        .headerButton{
          float: left;
          margin: 10px 10px;
          a{
            .indexButton{
              float: left;
              margin-left: 20px;
              background-size: 90px 30px;
              background-repeat: no-repeat;
              width: 90px;
              height: 30px;
              background-image: url(./../images/header/indexButton.png);
              &:hover{
                background-image: url(./../images/header/indexHover.png)
              }
            }
            .buySection{
              float: left;
              background-size: 94px 30px;
              background-repeat: no-repeat ;
              width: 94px;
              height: 30px;
              background-image: url(./../images/header/buyButton.png);
              &:hover{
                background-image: url(./../images/header/buyHover.png)
              }
            }
          }
        }
      }
      .headerRight{
        position: relative;
        right: 50%;
        float: right;
        margin-right: -470px;
        .searchDiv{
          float: left;
          .searchField{
            padding: 0;
            border: solid 2px #CEC8C4;
            border-radius: 7px;
            float: right;
            margin-top: 10px;
            margin-right: 20px;
            input,button{
              border: none;
              float: left;
            }
            .searchContent{
              height: 25px;
              width: 200;
              margin-right: 0px;
              padding-right: 0px;
              background: #F8F8F7;
              border-bottom-left-radius: 5px;
              border-top-left-radius: 5px;
              &:focus{
                background: #e8e8e8 ;
                outline: none;
              }
            }
            .searButton{
              border: none;
              width: 40px;
              height: 27px;
              margin-left: 0;
              padding: 0;
              border-bottom-right-radius: 5px;
              border-top-right-radius: 5px;
              background: url(./../images/header/searchButton.png) no-repeat top;
              cursor: pointer;
              &:hover{
                background: #e8e8e8 ;
                outline: none;
              }
            }
          }
        }
        .saleButton{
          color: white;
          border-radius: 5px;
          border: none;
          background-color: #67C437;
          font: 15px "微软雅黑";
          padding: 5px 17px;
          margin: 10px 10px;
          float: left;
          cursor: pointer;
        }
        .buyButton{
          color: white;
          border-radius: 5px;
          border: none;
          background-color: #FF8B00;
          font: 15px "微软雅黑";
          padding: 5px 17px;
          margin: 10px 10px;
          float: left;
        }
      }
    }

  }

}
